<template>
	<u-popup :show="showPopup" mode="bottom" :round="10">
		<!-- <uni-popup ref="popup" type="bottom" @touchmove.stop.prevent="()=>{return}"> -->
		<view class="picker-box" :style="{height:screenHeight+'px'}">
			<view class="picker-close df-r-reverse">
				<u-icon name="close-circle-fill" @click="onClose()" color="#E93031" />
			</view>
			<view class="box-select-button">
				<view class="button" :class="{'button-select':tabIndex===0}" @click="onTab(0)">
					{{provinceName}}
				</view>
				<view class="button" :class="{'button-select':tabIndex===1}" @click="onTab(1)">
					{{cityName}}
				</view>
				<view class="button" :class="{'button-select':tabIndex===2}" @click="onTab(2)">
					{{districtName}}
				</view>
			</view>
			<view class="box-select-area">
				<view class="box-province" v-if="tabIndex===0">
					<scroll-view scroll-y class="scroll-view" :style="{height:boxScrollArea+'px'}">
						<view class="province-item" v-for="(item,index) in provinceArray" :key="index"
							@click="onSelectProvince(item)">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
				<view class="box-city" v-else-if="tabIndex===1">
					<scroll-view scroll-y class="scroll-view" :style="{height:boxScrollArea+'px'}">
						<view class="city-item" v-for="(item,index) in cityArray" :key="index"
							@click="onSelectCity(item)">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
				<view class="box-district" v-else-if="tabIndex===2">
					<scroll-view scroll-y class="scroll-view" :style="{height:boxScrollArea+'px'}">
						<view class="district-item" v-for="(item, index) in districtArray" :key="index"
							@click="onSelectDistrict(item)">
							{{item.name}}
						</view>
					</scroll-view>
				</view>
			</view>


		</view>
		<!-- </uni-popup> -->
	</u-popup>
</template>

<script>
	import addressData from './addressData.js'
	export default {
		data() {
			return {
				tabIndex: 0,
				screenHeight: 600,
				province: '', //省
				city: '', //市
				district: '', //区
				showPopup: false
			}
		},
		mounted() {
			const res = uni.getSystemInfoSync();
			if (res && res.screenHeight) {
				this.screenHeight = res.screenHeight * 0.75
			} else {
				this.screenHeight = 600
			}
		},
		computed: {
			boxScrollArea() {
				return this.screenHeight - uni.upx2px(220)
			},
			provinceName() {
				if (this.province) {
					return this.province.name
				} else {
					return '请选择省'
				}
			},
			cityName() {
				if (this.city) {
					return this.city.name
				} else {
					return '请选择市'
				}
			},
			districtName() {
				if (this.district) {
					return this.district.name
				} else {
					return '请选择区'
				}
			},

			provinceArray() {
				return addressData
			},
			cityArray() {
				// console.log("**** this.province:", this.province)
				if (this.province) {
					// console.log(" this.province.children:", this.province.children.length)
					return this.province.children
				} else {
					return []
				}
			},
			districtArray() {
				// console.log("**** this.city:", this.city)
				// console.log(" this.province.children:", this.province.children.length)
				if (this.city) {
					return this.city.children
				} else {
					return []
				}
			}
		},
		methods: {
			onOpen() {
				this.tabIndex = 0
				this.province = ''
				this.city = ''
				this.district = ''
				this.showPopup = true
			},
			onClose() {
				this.showPopup = false
			},
			onTab(index) {
				///没有选中上一级目录 该目录不能响应点击
				if (index === 1) {
					if (this.cityArray.length === 0) {
						return
					}
				}
				if (index === 2) {
					if (this.districtArray.length === 0) {
						return
					}
				}

				this.tabIndex = index
				///点击上一个目录 清除下一级目录 之前选择信息
				if (this.tabIndex === 0) {
					this.province = ''
					this.city = ''
					this.district = ''
				} else if (this.tabIndex === 1) {
					this.city = ''
					this.district = ''
				}


			},
			onSelectProvince(item) {
				// console.log("onSelectProvince:", item)
				this.province = item
				this.tabIndex = 1

			},
			onSelectCity(item) {
				// console.log("onSelectCity:", item)
				this.city = item
				this.tabIndex = 2
			},
			onSelectDistrict(item) {
				// console.log("onSelectDistrict:", item)
				this.district = item
				this.onSelectConfirm();
			},
			onSelectConfirm() {
				this.$emit('change', {
					text: [this.province.name, this.city.name, this.district.name],
					code: [this.province.id, this.city.id, this.district.id]
				})
				this.showPopup = false
			}

		}
	}
</script>


<style lang="scss" scoped>
	.picker-box {

		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		border-top-right-radius: 24rpx;
		border-top-left-radius: 24rpx;

		.picker-close {
			padding: 25rpx;
			border-bottom: 1px solid #dddddd;
		}

		.box-select-button {
			height: 88rpx;
			padding: 0rpx 24rpx;
			display: flex;
			flex-direction: row;

			// background-color: #007AFF;
			.button {
				margin-left: 20rpx;
				font-size: 28rpx;
				font-weight: bold;
				line-height: 88rpx;
				min-width: 200rpx;
				max-width: 350rpx;
				overflow: hidden;
				word-wrap: normal;

				// padding-left: 80rpx;
				// background-color: #007AFF;
			}

			.button:first-child {
				margin-left: 0;
			}

			.button-select {
				font-weight: bold;
				color: #F03C02;
				// border-bottom: 2rpx solid #007AFF;
			}
		}

		.box-select-area {
			flex: 1;
			padding: 0 24rpx;
			margin-bottom: 30rpx;

			.box-province {
				height: 100%;
				width: 100%;

				.scroll-view {
					padding: 5rpx;
					width: 100%;
					height: 600rpx;

					.province-item {
						padding: 5rpx;
						height: 60rpx;
						font-size: 26rpx;
					}
				}
			}

			.box-city {
				height: 100%;
				width: 100%;

				.scroll-view {
					height: 100%;
					width: 100%;

					.city-item {
						height: 60rpx;
						font-size: 26rpx;
					}
				}
			}

			.box-district {
				height: 100%;
				width: 100%;

				.scroll-view {
					height: 100%;
					width: 100%;

					.district-item {
						height: 60rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}
</style>
